import React from 'react'
import './ListItem.scss'
// import { contentList } from '../../actions/contentListActions'
import { connect } from 'react-redux'
class ListItem extends React.Component {
  constructor(props) {
    super(props)
  }
  renderTotalPrice(ele, data, index) {
    return (
      <div className="order_product" key={index}>
        <span>...</span>
        <div className="p-total-count">
          总计
          {ele.product_count}
          个菜，实付
          <span className="total-price">¥{data.total}</span>
        </div>
      </div>
    )
  }
  renderDetail(data) {
    let product_list = data.product_list
    let _list = JSON.parse(JSON.stringify(product_list))
    _list.push({
      type: 'more'
    })
    return _list.map((ele, index) => {
      if (ele.type === 'more') {
        return this.renderTotalPrice(ele, data, index)
      } else {
        return (
          <div className="order_product" key={index}>
            {ele.product_name}
            <div className="product_account">x{ele.product_count}</div>
          </div>
        )
      }
    })
  }
  goEval() {
    window.location.href = './evaluation.html'
  }
  render() {
    let data = this.props.itemData
    return (
      <div className="order_item">
        <div className="order_item_top">
          <img className="order_img" src={data.poi_pic} alt="" />
          <div className="order_top_right">
            <div className="order_title">
              <p className="name one-line">{data.poi_name}</p>
              <div className="arrow" />
              <div className="order_status">{data.status_description}</div>
            </div>
            <div className="order_detail">{this.renderDetail(data)}</div>
          </div>
        </div>
        <div className="order_bottom clearfix">
          <div className="evaluate" onClick={this.goEval}>
            评价
          </div>
        </div>
      </div>
    )
  }
}

export default connect()(ListItem)
